<template>
  <div>
    <swiper class="swiper" ref="swiper"
            :options="swiperOption"
            :auto-update="true"
            :auto-destroy="true"
            :delete-instance-on-destroy="true"
            :cleanup-styles-on-destroy="true">
      <slot></slot>
    </swiper>
    <div class="swiper-button-prev" slot="button-prev"/>
    <div class="swiper-button-next" slot="button-next"/>
  </div>
</template>

<script>
// import {Swiper} from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'

export default {
  name: "HomeSwiper",
  components: {
    // Swiper
  },
  methods: {

  },
   computed: {
     swiper() {
       return this.$refs.swiper.$swiper
     }
   },
  data() {
    return {
      swiperOption: {
        slidesPerView: 3,
        spaceBetween: 30,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        on: {
          resize: () => {
            this.$refs.swiper.$swiper.changeDirection(
                window.innerWidth <= 960
                    ? 'vertical'
                    : 'horizontal'
            )
          }
        }
      }
    }
  },
  mounted() {
    this.swiperOption={
      pagination:{
        el:'.swiper-pagination',
      },
      on: {},
    }
  }
}
</script>

<style lang="scss" scoped>

@media (max-width: 1024px) {
  .swiper-button-next {
    right: 0;
    transform: rotate(90deg);
  }

  .swiper-button-prev {
    left: 0;
    transform: rotate(90deg);
  }
}

.swiper-button-next {
  margin-right: -4.7em;
  height: 2em;
  width: 2em;
  background-color: #fff;
  border-radius: 10em;
  box-shadow:0 0 0.4em 0 rgba(0,0,0,0.4);
  transition: background-color 500ms;
  &:after{
    content: "";
    width: 0.2em;
    height: 0.2em;
    border-right: 0.04em solid #000;
    border-bottom: 0.04em solid #000;
    margin-right: 0.07em;
    transform: rotate(-45deg);
  }
  &:hover{
    background-color: gray;
  }
}

.swiper-button-prev {
  margin-left: -4.7em;
  height: 2em;
  width: 2em;
  background-color: #fff;
  border-radius: 10em;
  box-shadow:0 0 0.4em 0 rgba(0,0,0,0.4);
  transition: background-color 500ms;
  &:after{
    content: "";
    width: 0.2em;
    height: 0.2em;
    border-left: 0.04em solid #000;
    border-top: 0.04em solid #000;
    margin-left: 0.07em;
    transform: rotate(-45deg);
  }
  &:hover{
    background-color: gray;
  }
}

</style>
